<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-09-16 17:26:31
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-10-13 16:00:38
 * @FilePath: /hr_new_vue3/src/views/Management/Organization/PositionManagement/SystemManagement/Components/Matrix/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 组织-职位管理-职位管理-职位体系矩阵 -->
<template>
  <div class="wrap">
    <a-table
      style="width: 98%; margin: 10px; height: 550px"
      :span-method="dataSpanMethod"
      :columns="columns.data"
      :data="data.data"
      :scroll="{ x: 1000, y: 1000 }"
      :pagination="false"
      :stripe="true"
    >
      <template #customize="{ record, column }">
        <a-input
          @change="edit($event, record, column)"
          :disabled="record.disabled"
          :default-value="showTableData(record, column)"
        ></a-input>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import {
  getPositionHierarchyList,
  getPositionSortList,
  GetPositionSystem,
  PutPositionSystem,
  PostPositionSystem
} from '@/apis/management/organization/baseSetting/PositionSystem/index';
import { matrixData } from '../matrix';
const props = withDefaults(
  //参数说明
  defineProps<{
    columnsData: any;
    datas: any;
    tableDatas: any;
  }>(),
  { columnsData: () => [], datas: () => [], tableDatas: () => [] }
);

const columns = reactive({ data: [] });
const data = reactive({ data: [] });

watch(
  () => props.columnsData,
  () => {
    const { columns: newColumns, data: newData } = matrixData(
      props.columnsData,
      props.datas,
      props.tableDatas,
      1
    );
    columns.data = newColumns;
    data.data = newData;
  }
);

const { dataSpanMethod, showTableData } = matrixData();

//编辑表格数据
const edit = async (editData: any, record: any, column: any) => {
  if (!editData) return;
  if (record[column.dataIndex]?.id) {
    await PutPositionSystem({
      id: record[column.dataIndex].id,
      dataIndex: column.dataIndex,
      level: record.rank,
      value: editData
    });
  } else {
    await PostPositionSystem({
      dataIndex: column.dataIndex,
      level: record.rank,
      value: editData
    });
  }
  emit('init');
};
const emit = defineEmits(['init']);
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;
  display: flex;
  width: 100%;
}

:deep(.arco-input-wrapper) {
  border: none;
  text-align: center;
  background-color: transparent;
}
:deep(.arco-input) {
  text-align: center;
}
</style>
